<template>
  <div>
    <tableSpanRow 
      :tableData='tableData' 
      :tableHead='tableHead'
      :isChecked='false' 
      :isHasNo='false'
      @getTableChecked='getSelectTable'>
      <template slot="tableLeft">
        <el-table-column prop="name" label="区县大队" align="center">
          <template>
            <span style="color:#0063D2">1111</span>
          </template>
        </el-table-column>
      </template>
    </tableSpanRow>
    <tableSpanRow 
      :tableData='tableData' 
      :tableHead='FirstTableHead'
      :isChecked='true' 
      :isHasNo='true'
      @getTableChecked='getSelectTable'>
      <template slot="tableLeft" >
        <el-table-column prop="name" label="区县大队" align="center">
          <template slot-scope="scope"> 
            <span style="color:#0063D2">11111111111</span>
          </template>
        </el-table-column>
      </template>
    </tableSpanRow>
  </div>
</template>

<script>
  import tableSpanRow from './index'
  export default {
    components:{
      tableSpanRow
    },
    data() {
      return {
        // 单级表头
        FirstTableHead: [
          {
            label: '总数',
            prop: 'a',
            width: '100px',
            align: 'center',
            headAlign: 'center'
          },
          {
            label: '总数',
            prop: 'a',
            align: 'center',
            headAlign: 'center'
          },
          {
            label: '总数',
            prop: 'a',
            align: 'center',
            headAlign: 'center',
            onClickFn: this.clickRow,
            cssAttr: {
              cursor: 'pointer',
              color: '#0f0',
              fontSize:'20px'
            }
          },
          {
            label: '总数',
            prop: 'a',
            align: 'center',
            headAlign: 'center'
          }
        ],
        tableData: [{a:1}],
        // 多级表头
        tableHead: [
          {
            label: '总数',
            prop: 'a'
          },
          {
            label: '号码归属地',
            children: [
              {
                label: '本地手机',
                prop: 'a'
              },
              {
                label: '本地固定电话',
                prop: 'a'
              },
              {
                label: '外地手机',
                prop: 'a'
              },
              {
                label: '本地固定电话',
                prop: 'a'
              },
              {
                label: '特服号码',
                prop: 'a'
              },
              {
                label: '其他',
                prop: 'a'
              }
            ]
          },
          {
            label: '小广告类别',
            children: [
              {
                label: '内容违法',
                children: [
                  {
                    label: '刻章办证',
                    prop: 'a'
                  },
                  {
                    label: '色情信息',
                    prop: 'a'
                  },
                  {
                    label: '回收药品',
                    prop: 'a'
                  },
                  {
                    label: '涉财',
                    prop: 'a'
                  },
                  {
                    label: '涉毒',
                    prop: 'a'
                  },
                  {
                    label: '涉赌',
                    prop: 'a'
                  },
                  {
                    label: '非法行医',
                    prop: 'a'
                  },
                  {
                    label: '卫星电视',
                    prop: 'a'
                  }
                ]
              },
              {
                label: '一般信息类',
                children: [
                  {
                    label: '房屋广告',
                    prop: 'a'
                  },
                  {
                    label: '招聘信息',
                    prop: 'a'
                  },
                  {
                    label: '疏通打孔',
                    prop: 'a'
                  },
                  {
                    label: '旅游信息',
                    prop: 'a'
                  },
                  {
                    label: '商业宣传',
                    prop: 'a'
                  },
                  {
                    label: '家教培训',
                    prop: 'a'
                  },
                  {
                    label: '回收手机',
                    prop: 'a'
                  },
                  {
                    label: '公安移送',
                    prop: 'a'
                  },
                  {
                    label: '其他',
                    prop: 'a'
                  }
                ]
              },
              {
                label: '视觉环境类',
                children: [
                  {
                    label: '户外广告',
                    prop: 'a'
                  },
                  {
                    label: '牌匾标示',
                    prop: 'a'
                  },
                  {
                    label: '山寨指路牌',
                    prop: 'a'
                  },
                  {
                    label: '临窗广告',
                    prop: 'a'
                  },
                  {
                    label: '占道车身广告',
                    prop: 'a'
                  }
                ]
              }
            ]
          },
          {
            label: '小广告形式',
            children: [
              {
                label: '张贴',
                prop: 'a'
              },
              {
                label: '喷涂',
                prop: 'a'
              },
              {
                label: '散发',
                prop: 'a'
              },
              {
                label: '悬挂',
                prop: 'a'
              },
              {
                label: '其他',
                prop: 'a'
              }
            ]
          },
          {
            label: '状态',
            children: [
              {
                label: '已停机审核',
                prop: 'a'
              },
              {
                label: '已公示',
                prop: 'a'
              },
              {
                label: '已移送停机',
                prop: 'a'
              },
              {
                label: '待开通审核',
                prop: 'a'
              },
              {
                label: '待开通',
                prop: 'a'
              },
              {
                label: '已移送开通',
                prop: 'a'
              },
              {
                label: '已处罚',
                prop: 'a'
              },
              {
                label: '无效',
                prop: 'a'
              },
              {
                label: '免停机处罚',
                prop: 'a'
              }
            ]
          },
          {
            label: '核查结果',
            children: [
              {
                label: '已停机',
                prop: 'a'
              },
              {
                label: '已开通',
                prop: 'a'
              }
            ]
          },
          {
            label: '处罚金额(元)',
            prop: 'a'
          }
        ]
      }
    },
    methods: {
      getSelectTable(val) {
        console.log('getTableDataAndRef', val)
      },
      clickRow(val) {
        console.log('clickRow',val)
      }
    }
  }
</script>

<style>
</style>